---
title: React Input Mask
description: Learn how to use React Input Mask with Unform
---

[React Input Mask](https://github.com/sanniassin/react-input-mask) offers an easy way to add masks to inputs.

> ⚠️ All examples below are using **TypeScript**. If you're not using it, you can remove all type definitions from the component definition.

## Example

```tsx lineNumbers=true
import React, { useRef, useEffect } from 'react';
import ReactInputMask, { Props as InputProps } from 'react-input-mask';

import { useField } from '@unform/core';

interface Props extends InputProps {
  name: string;
}

export default function InputMask({ name, ...rest }: Props) {
  const inputRef = useRef(null);
  const { fieldName, registerField, defaultValue, error } = useField(name);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
      setValue(ref: any, value: string) {
        ref.setInputValue(value);
      },
      clearValue(ref: any) {
        ref.setInputValue('');
      },
    });
  }, [fieldName, registerField]);

  return (
    <ReactInputMask ref={inputRef} defaultValue={defaultValue} {...rest} />
  );
};
```
